<template>
    <div>

        <nav-header>
            <template v-slot:title>粉丝订单</template>
        </nav-header>

        <div class="order-statistics">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-xs-6">订单总金额：{{orderTotal}}</div>
                    <div class="col-xs-6" style="text-align: right">订单总数：{{orderNum}}</div>
                </div>
            </div>
        </div>

        <div v-for="item in orders" style="margin: 10px;border-radius: 5px;background-color: #fff;padding: 15px 0;">
            <div class="container-fluid">
                <div class="row" style="margin-bottom: 15px;position: relative">
                    <div class="col-xs-6">订单号:{{item.order_code}}</div>
                    <div class="col-xs-6">
                        <span style="position: absolute;right: 0;background-color: rgb(238, 238, 238);border-radius: 12px 0 0 12px;line-height: 24px;padding-left: 16px;">状态:已支付</span>
<!--                        <span-->
<!--                            v-if="item.order_pay_status == 0"-->
<!--                        style="position: absolute;right: 0;background-color: rgb(238, 238, 238);border-radius: 12px 0 0 12px;line-height: 24px;padding-left: 16px;">状态:未支付</span>-->
<!--                        <span-->
<!--                            v-if="item.order_pay_status == 1 || item.order_pay_status == 2"-->
<!--                        style="position: absolute;right: 0;background-color: rgb(238, 238, 238);border-radius: 12px 0 0 12px;line-height: 24px;padding-left: 16px;">状态:已支付</span>-->
                    </div>
                </div>
                <div class="row" style="margin-bottom: 15px;">
                    <div class="col-xs-6">
                        <img style="width: 100%;" :src="item.collection_img">
                    </div>
                    <div class="col-xs-6" style="text-align: right;">
                        <p style="color: gray">时间:{{item.order_pay_time}}</p>
                        <p style="color: rgb(214, 111, 84);"><span class="label label-warning"
                                                                   style="margin-right: 5px;">字画墨宝</span>{{item.collection_name}}
                        </p>
                        <p><span style="color: rgb(214, 111, 84);font-weight: bold;font-size: 16px;">￥{{item.order_total}}</span>
                        </p>
                    </div>
                </div>

                <div class="row" style="padding-bottom: 15px;">
                    <div class="col-xs-6" style="font-size: 16px;">商品归属</div>
                    <div class="col-xs-6" style="font-size: 16px;text-align: right">{{item.collection_agent_name}}</div>
                </div>
                <div class="row" style="padding-bottom: 15px;">
                    <div class="col-xs-6" style="font-size: 16px;">购买人</div>
                    <div class="col-xs-6" style="font-size: 16px;text-align: right">{{item.buyer_name}}</div>
                </div>

                <!--                <div class="row">-->
                <!--                    <div class="col-xs-6">-->
                <!--                    </div>-->
                <!--                    <div class="col-xs-6" style="text-align: right">-->
                <!--                        &lt;!&ndash;todo&ndash;&gt;-->
                <!--                        <p style="font-weight: bold;font-size: 16px;">已完结</p>-->
                <!--                    </div>-->
                <!--                </div>-->

            </div>
        </div>


    </div>
</template>
<script>
    import NavHeader from "../Layout/NavHeader";

    export default {
        components: {NavHeader},
        data() {
            return {
                orders: [
                    // {
                    //     id: '',
                    //     order_price: '',
                    //     order_time: '',
                    //     order_code: '',
                    //     agent_name: '',
                    //     agent_contract: '',
                    //     collection_name: '',
                    //     collection_status_text: '',
                    //     order_status: '',
                    //     collection_img: '',
                    //     collection_agent_name: '',
                    //     buyer_name: '',
                    // }
                ],
                orderTotal: 0.00,
                orderNum: 0.00,
            }
        },
        created() {
        },
        mounted() {
            this.getMemberOrder();
        },
        methods: {
            getMemberOrder() {
                let that = this;
                this.api.getMemberOrder().then(res => {
                    if (res.data) {
                        that.orders = res.data;
                        that.orders.forEach(function (item) {
                            that.orderTotal += parseFloat(item.order_total);
                        });
                        that.orderNum = that.orders.length;
                    }
                })
            }
        },
    }
</script>
<style>

    .order-statistics {
        background-color: #fff;
        padding: 10px;
        margin-top: 10px;
        margin-bottom: 10px;
        box-shadow: 0 3px 3px 2px #eeeeee;
        line-height: 40px;
    }


</style>
